<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    	<title></title>
    	<link href="css/mui.min.css" rel="stylesheet"/>
    	<link rel="stylesheet" type="text/css" href="css/channel.css"/>
	</head>
	<body>
		<div id="bar-cover" style="
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 20px;
			display: none;
			z-index: 100;
			background-image: url('img/bar-cover.png');
			background-color: rgba(255, 255,255, 0.9);
			background-repeat: repeat-x;
			background-size: contain;
		"></div>
		
		<div id="top-topic">
			
		</div>
		<div id="channels">
			<div class="channel" data-index="1">
				
			</div>
			<div class="channel" data-index="2">
				
			</div>
			<div class="channel" data-index="3">
				
			</div>
			<div class="channel" data-index="4">
				
			</div>
			<div class="channel" data-index="5">
				
			</div>
		</div>
		
		<script id="top-tpl" type="text/html">
			<div class="topic" data-id="{{ topic.id }}">
				<img src="{{ topic.cover }}" />
			</div>
		</script>
		
		<script id="channel-tpl" type="text/html">
			<div class="header">
				<p><span class="name">{{ name }}</span> · <span class="description">{{ description }}</span></p>
				<div class="count" style="display: none;">
					<p><span class="value">{{ length }}</span> 专题  <img class="arrow" src="img/jiao.png"/> </p>
				</div>
			</div>
			<div class="topics">
				{{ each topics }}
				<div class="topic" data-id="{{ $value.id }}">
					<div class="wraper" style="min-height: {{width / 2 - 8}}px;">
						<img class="cover-cover" src="img/cover.png"/>
						<img class="cover"  src="{{ $value.cover }}!square"/>
						<div class="info">
							<p class="name">{{ $value.name }}</p>
							<p class="count">
								<span class="value">{{ $value.source_count }}</span>篇内容 <span class="sep">|</span> <span class="value">{{ $value.rec_count }}</span>人收藏
							</p>
						</div>
					</div>
				</div>
				{{ /each }}
			</div>
		</script>
		
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-mini-1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/channel.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
